<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>三3三博客社区</title>
    <link rel="icon" href="../../images/icon.jpg" sizes="32x32">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=ad26780bfaabf0ca27ae6078e2e81682"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        .shadow_css {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 10;
            /* 为mozilla firefox 设置透明度  */
            -moz-opacity: 0.6;
            /* 设置透明度 */
            opacity: .60;
            /* 为IE 设置透明度  */
            filter: alpha(opacity=66);
        }

        .window_css {
            display: none;
            position: absolute;
            top: 20%;
            left: 25%;
            width: 50%;
            height: 60%;
            border: 3px solid honeydew;
            background-color: aliceblue;
            z-index: 11;
        }
    </style>
</head>

<body>
<!--用来引出悬浮窗口的div-->
<div>
    <a href="javascript:void(0)" onclick="displayWindow()">
        点击显示悬浮窗口
    </a>
</div>
<!--悬浮窗口-->
<div id="window" class="window_css">
    <a href="javascript:void(0)" onclick="hideWindow()">
        关闭悬浮窗口
    </a>
</div>
<!--出现悬浮窗口后,背景变暗-->
<div id="shadow" class="shadow_css"></div>
</body>

<script>
    /*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
    function displayWindow() {
        /*悬浮窗口的显示,需要将display变成block*/
        document.getElementById("window").style.display = "block";
        /*将背景变暗*/
        document.getElementById("shadow").style.display = "block";
    }

    /*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
    function hideWindow() {
        document.getElementById("window").style.display = "none";
        document.getElementById("shadow").style.display = "none";
    }
</script>


</html>
